import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity, ScrollView} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import {navigate} from '@/utils/navigation';

export default function Profile() {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView>
        <View style={styles.header}>
          <View style={styles.headerTop}>
            <View style={styles.avatar} />
            <Text
              style={styles.loginText}
              onPress={() => navigate('/auth/login')}>
              立即登录
            </Text>
            <Text style={styles.subText}>登录体验更多功能</Text>
          </View>
        </View>

        <View style={styles.quickActions}>
          <TouchableOpacity style={styles.actionItem}>
            <View style={styles.actionIcon} />
            <Text style={styles.actionText}>我的订单</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.actionItem}>
            <View style={styles.actionIcon} />
            <Text style={styles.actionText}>优惠券</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.actionItem}>
            <View style={styles.actionIcon} />
            <Text style={styles.actionText}>我的团购</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.actionItem}>
            <View style={styles.actionIcon} />
            <Text style={styles.actionText}>积分兑换</Text>
          </TouchableOpacity>
        </View>

        <View style={styles.menuList}>
          {[
            '高线存储',
            '我的点赞',
            '我的余额',
            '图书城城',
            '分享有礼',
            '在线客服',
            '客服热线',
          ].map((item, index) => (
            <TouchableOpacity key={index} style={styles.menuItem}>
              <View style={styles.menuIcon} />
              <Text style={styles.menuText}>{item}</Text>
              {index >= 5 && (
                <Text style={styles.menuExtra}>周一至周日 09:00-24:00</Text>
              )}
            </TouchableOpacity>
          ))}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    backgroundColor: '#fff',
    paddingVertical: 20,
    paddingHorizontal: 16,
  },
  headerTop: {
    alignItems: 'center',
  },
  avatar: {
    width: 80,
    height: 80,
    backgroundColor: '#eee',
    borderRadius: 40,
    marginBottom: 12,
  },
  loginText: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 4,
  },
  subText: {
    fontSize: 14,
    color: '#999',
  },
  quickActions: {
    flexDirection: 'row',
    backgroundColor: '#fff',
    paddingVertical: 15,
    marginTop: 10,
  },
  actionItem: {
    flex: 1,
    alignItems: 'center',
  },
  actionIcon: {
    width: 28,
    height: 28,
    backgroundColor: '#eee',
    marginBottom: 8,
  },
  actionText: {
    fontSize: 12,
    color: '#666',
  },
  menuList: {
    backgroundColor: '#fff',
    marginTop: 10,
  },
  menuItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#f5f5f5',
  },
  menuIcon: {
    width: 24,
    height: 24,
    backgroundColor: '#eee',
    marginRight: 12,
  },
  menuText: {
    flex: 1,
    fontSize: 14,
  },
  menuExtra: {
    fontSize: 12,
    color: '#999',
  },
});
